<template>
  <a-config-provider :locale="locale">
    <!-- 全屏加载指示器 -->
    <div v-if="permissionStore.isLoadingRoute" class="global-loading-overlay">
      <a-spin tip="加载中..." />
    </div>
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </a-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn'
import { usePermissionStore } from '@/stores/permission' // 导入 permission store

const locale = ref(zhCN)
const permissionStore = usePermissionStore() // 获取 store 实例
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

/* 确保所有layout组件正确显示 */
#app, .layout {
  height: 100vh;
  width: 100%;
}

/* 修复侧边栏样式 */
.layout-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
}

.global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /*确保在最顶层*/
}
</style>